<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<head>
    <meta charset="utf-8" />
    <title>保险代理后台管理系统</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <jsp:include page="../common/header.jsp"></jsp:include>
    <%@include file="../common/taglib.jsp"%>
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== 单独作用于本页表格td ================== -->
    <style>
    </style>
    <!-- ================== 单独作用于本页表格td ================== -->
</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <jsp:include page="../common/top.jsp"/>

    <!-- begin #sidebar -->
    <jsp:include page="../common/sitebar.jsp"/>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

    <!-- begin #content -->
    <div id="content" class="content">
        <div class="row  p-b-20">
            <!-- begin col-12 -->
            <%--<a href="<%=path%>/advance/chenckAdvance?tid=39">审核</a>--%>
            <div class="panel-body panel-form">
                <form class="form-inline" action="<%=path%>/advance/udpateAdvanceAmtount" method="post" id="form1" data-parsley-validate="true" >
                    <label>今日垫资额：</label>
                    <div class="form-group"  id="table1">
                        <p class="form-control-static"><strong>${advance.todatAmount}万元</strong></p>
                        <button type="button" onclick="changes(2)"  class="btn btn-primary">编辑</button>
                    </div>
                    <div class="form-group" id="table2" style="display:none;" >
                        <div class="input-group m-r-10">
                            <input type="text"  id="applyAmount" name="applyAmount" maxlength="9" value="${advance.todatAmount}" class="form-control"  data-parsley-required="true" data-parsley-number="true" data-parsley-required-message="请输入垫资限额"
                                   data-parsley-maxlength="9" data-parsley-number-message="垫资限额信息填写有误,请重新填写" data-parsley-maxlength-message="垫资限额最多为9位数字">
                            <span class="input-group-addon">万元</span>
                        </div>
                        <button type="submit"  class="btn btn-primary m-r-5">提交</button>
                        <button type="button" onclick="openModel(null,1)" class="btn btn-default">取消</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- end row -->
        <select id="selected" class="form-control" style="width:138px">
            <option name="type" value="1">最近一周</option>
            <option name="type" value="2">最近一个月</option>
            <option name="type" value="3">最近一年</option>
        </select><div id="container" class="align-center"  style="width:800px;height:400px;align-content: center" ></div>
    </div>

    <!-- end #content -->
    <%-- <div id="main" style="width: 600px;height:400px;"></div>--%>
</div>
<!-- end row -->
<div class="modal fade" id="modal-subInfo">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div id="showSubInfo" class="modal-body">
                当前填写内容未提交，确认取消？
            </div>
            <div class="modal-footer">
                <a href="javascript:;" id="subButtonYes" class="btn btn-primary">确定</a>
                <a href="javascript:;" id="subButtonNo"  class="btn btn-default" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>


<%--提示框--%>
<div class="modal fade" id="modal-dialog" style="display: none;">
    <input type="hidden" name="tid" id="tid">
    <input type="hidden" name="type" id="typee">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">温馨提示</h4>
            </div>
            <div class="modal-body" id="me">

            </div>
            <div class="modal-footer">
                <a href="javascript:;" onclick="doSomeThing()"  class="btn btn-primary">确定</a>
                <a href="javascript:;"class="btn btn-default" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>
<!-- end page container -->
<jsp:include page="../common/footer.jsp"/>

<script src="/static/js/advance/echarts.common.min.js"></script>



<!-- ================== END PAGE LEVEL JS ================== -->

<script>
    $(document).ready(function () {
        App.init();
        TableManageFixedHeader.init();
    });

    window.ParsleyValidator.addValidator('number', function(value) {
        if(value!= ""){
            return /^[0-9]+(.[0-9]{1,2})?$/.test(value)
        }
        return true;
    },32);

    function changes(type) {
        if(type == '1'){
            $("#table1").show();
            $("#table2").hide();
        }else{
            $("#table1").hide();
            $("#table2").show();
        }
        window.reload();
    }
    function cancle() {
        if(confirm("当前填写内容未提交，确认取消？")){
            $("#table1").show();
            $("#table2").hide();
        }
    }
    //打开模态框
    function openModel(ids,type) {
        $("#tid").val(ids);
        $("#typee").val(type);
        if (type==1){
            $("#me").html("当前填写内容未提交，确认取消？");
        }
        $('#modal-dialog').modal('show');
    }

    function doSomeThing() {
        var tid = $("#tid").val();
        var type = $("#typee").val();
        if(type=1){
            window.location.href = "/advance/toList";
            // $("#table1").show();
            // $("#table2").hide();
        }

        $('#modal-dialog').modal('hide');
    }

    //去往编辑页面
    function toedit(id){
        window.location.href="<%=path%>/sysuser/toedit/"+id;
    }

    //去往新增页面
    function toadd(){
        window.location.href="<%=path%>/sysuser/toadd";
    }

    $(function(){
        $("#form1").ajaxForm(function(data){
            if(data==true){
                $("#showSubInfo").html(" 提交成功");
                $("#subButtonYes").attr("onclick","location.reload();");
                $("#modal-subInfo").modal('show');
            }else {
                $("#showSubInfo").html("已有垫资设置在审核，审核结束后才能再次设置");
                $("#subButtonYes").attr("onclick","location.reload();");
                $("#modal-subInfo").modal('show');
            }
        });
    });

    //编辑垫资限额
    function updateAmount(){
        jQuery.ajax({
            type: "post",
            url: "<%=path%>/advance/udpateAdvanceAmtount",
            data:$('#form1').serialize(),
            dataType: "json",
            success: function (data) {
                if(data == true){
                    /*  alert(data.msg);*/
                    $('#form1').submit();
                    alert('垫资限额设置完成!');
                    window.location.href="/advance/toList";
                }else{
                    alert('正在审批中');
                    window.location.href="/advance/toList";
                }
            }
        });
    }
</script>
<script type="text/javascript">
    $(function(){
        $("#selected").change(function(type){
            setInfo();
        });
        setInfo();
    });
    function sbx(data,data1){
        echarts.init(document.getElementById('container')).setOption({
            title: {
                /*text: '折线图堆叠'*/
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['实际垫资','历史设置']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                /*feature: {
                 dataView: {},
                 saveAsImage: {
                 pixelRatio: 2
                 },
                 restore: {}
                 }*/
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                splitLine:{show: false}
            },
            yAxis: {type: 'value',
                axisLabel : {
                    formatter: '{value} 元'
                }},
            series: [
                {
                    name:'实际垫资',
                    type:'line',
                    smooth: false,
                    data:data1
                },
                {
                    name:'历史设置',
                    type:'line',
                    stack:'历史设置',
                    smooth: false,
                    itemStyle : {
                        normal : {
                            color:'#3399FF',
                            lineStyle:{
                                color:'#3399FF'
                            }
                        }
                    },
                    data: data
                }
            ]
        });
    }

    function setInfo(){
        var selectedText = $("#selected").val();
        $.ajax({
            url:"<%=path%>/advance/chartData/",
            type:"POST",
            data:{
                type:selectedText
            },
            dataType:"JSON",
            success:function(msg){

                var datas1 = [];
                var datas2 = [];
                for(var i=0;i<msg.length;i++){
                    data1=[];
                    data2=[];
                    var history = msg[i].history;
                    var actual = msg[i].actual;
                    var day = msg[i].day;
                    data1.push(day);
                    data1.push(history);
                    data2.push(day);
                    data2.push(actual);
                    datas1.push(data1);
                    datas2.push(data2);
                }
                console.log(datas1);
                console.log(datas2);
                sbx(datas1,datas2);
            }
        })
    }
</script>
</body>
</html>
